import { useEffect, useState } from 'react'
import { Select } from 'antd'
import { http } from '../../utils'

const { Option } = Select

const Channel = ({ value, onChange, width }) => {
  const [channels, setChannels] = useState([])

  useEffect(() => {
    // 获取频道列表数据的方法
    const getChannles = async () => {
      const res = await http.get('/channels')
      setChannels(res.data.data.channels)
    }

    getChannles()
  }, [])

  return (
    <Select
      value={value}
      onChange={onChange}
      placeholder="请选择文章频道"
      style={{ width }}
    >
      {channels.map(item => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  )
}

export default Channel
